'use strict';
import {
    StyleSheet,
    Image,
    Text,
    View,
    ScrollView,
    TouchableOpacity
} from 'react-native';
import React  from 'react';
import {Utils} from '../config/utils';
let scrollInterval;
export default class ScrollNews extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: props.content
        };
    }

    scroll(contentWidth){
        let distance = 0;
        let that = this;
        
        scrollInterval = setInterval(()=>{
            if(contentWidth>=Utils.size.width){
                if(Math.abs(distance) >= (contentWidth-Utils.size.width+30)){
                    distance=0;
                    if(that.refs.scroll){
                        that.refs.scroll.scrollWithoutAnimationTo('',distance);
                    }
                }else{
                    distance=distance+1;
                    if(that.refs.scroll){
                        that.refs.scroll.scrollTo({
                            x:distance
                        });    
                    }
                }    
            }else{
                if(Math.abs(distance) >= Utils.size.width){
                    distance=0;
                    that.refs.scroll.scrollWithoutAnimationTo('',distance);
                }else{
                    distance=distance-1;
                    if(that.refs.scroll){
                        that.refs.scroll.scrollTo({
                            x:distance
                        });
                    }
                }
            }
        },100)
    }
    componentWillUnmount(){
        scrollInterval=null;
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView
                    ref='scroll'
                    onContentSizeChange = {(contentWidth)=>this.scroll(contentWidth)}
                    showsHorizontalScrollIndicator={false}
                    horizontal={true}>
                        <View style={styles.scrollItem}>
                            <Text style={styles.scrollText}>
                                {this.state.content}
                            </Text>
                        </View>
                </ScrollView>
            </View>            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height:30,
        backgroundColor: 'yellow'
    },
    scrollItem:{
        justifyContent:'center',
        backgroundColor: 'yellow',
    },
    scrollText:{
        color:'red',
        fontSize:14,
        textAlign:'left',
    }
});

